在繼續往下之前，想先來整理一篇常見也常用的 JavaScript 語法，這些是我認為新手會比較不熟悉但用到頻率會很高的語法。
雖然在前端開發常常是看到什麼不會，就馬上 Google 尋找答案或學習新知識，但如果能先了解一些常用的語法，在之後學習的路上也會更得心應手、更加輕鬆～
與一般正規函數寫法上的不同：
// 一般正規函數
function getDate() {}
// 箭頭函數
const getDate = () => {}
箭頭函數的一些特點：（更短的函式寫法）
const getDate = (day) => {
console.log("The date is " + day);
}
// 只有一個參數時，可以省略括號；若無參數，就一定要加括號
const getDate = day => {
console.log("The date is " + day);
}
// 只有一行程式碼時，可以省略大括號
const getDate = (month, day) => console.log("The date is " + day);
// 當內容只有「return」的時候，可以拿掉return和外面的大括號
const getDate = day => day;
一般的字串使用 ”” 或 ‘’ 包起來，而樣板字串是由 ```` 反引號（back-tick，重音符號）包起來
${} 包起來）const name = "Sofia";
console.log("Hello, my name is: " + name);
console.log(`Hello, my name is: ${name}`);
// output: "Hello, my name is: Sofia"
console.log('string line 1\n' +
'string line 2');
console.log(`string line 1
string line 2`);
// output: "string line 1
// string line 2"
let a = 2;
let b = 3;
console.log('Five is ' + (a + b) + ' and\nnot ' + (3 * a + b) + '.');
console.log(`Five is ${a + b} and
not ${3 * a + b}.`);
// output: "Five is 5 and
// not 9."
const menu = [
{
food: "cake",
price: 50
},
{
food: "hamburger",
price: 110
},
{
food: "soup",
price: 60
}
];
const food = menu.map((el, index) => el.food);
console.log(food); // output: ["cake","hamburger","soup"]
const array = ['a', 'b', 'c'];
array.forEach(el => console.log(el));
// output: "a"
// output: "b"
// output: "c"
…）用來展開陣列或字串
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers));
// output: 6
let array1 = [1, 2, 3];
let array2 = [4, 5, 6];
let array3 = [];
array3 = [...array1];
console.log(array3);
// output: [1,2,3]
console.log([...array1, ...array2]);
// output: [1,2,3,4,5,6]
let menu = [
{
food: "cake",
price: 50
},
{
food: "hamburger",
price: 110
},
{
food: "soup",
price: 60
}
];
console.log([...menu, { food: "salad", price: 75 }]);
? :簡潔版的 if 條件判斷句，只使用一行完成。
語法：條件 ? 條件成立時執行 : 條件不成立時執行
// if 判斷句
const number = 1;
let color;
if (number === 1) {
color = "Red";
} else {
color = "Blue";
}
console.log(color); // "Red"
// 條件運算子
const number = 1;
const color = number === 1 ? "Red" : "Blue" ;
console.log(color); // "Red"
單看簡單的例子可能還不清楚要在哪個時機使用，之後有機會碰到實際應用時會再特別說明～
iThome鐵人賽
看影片追技術